﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>tabpanel 测试</title>
<script type="text/javascript" src="../base/javascript/ext-core-min.js"></script>
<script type="text/javascript" src="javascript/tabpanel.js"></script>
<link rel="stylesheet" type="text/css" href="../base/css/core.css" />
<link rel="stylesheet" type="text/css" href="css/aol/tabpanel.css" id="skinCss" />

<style type="text/css">
	ul.navi {
		list-style-type:none;
	}
	
	ul.navi li{
		float:left;
		width:40px;
	}
	html,body {
		margin:0;
		padding:0;
		font-size:14px;
	}
	#header_ext {
		background-color:#CFE2F3;
		height:100px;
		background-image:url(./image/aol/blue_skin.png);
		background-position:0 -143px;
		background-repeat:repeat-x;
		margin:0;
		padding:0;
		padding-top:5px;
		position:relative;
	}
	
	#header_ext h1 {
		margin:0;
		padding:40px 0 0;
		text-align:center;
		font-size:22px;
	}
	
	#header_ext ul {
		position:absolute;
		top:110px;
		right:10px;
	}
	
	#header_ext ul li {
		width:60px;
	}
		
	ul.navi li a {
		color:#36658E;
		font-weight:bold;
	}
	ul.navi li a:hover {
		color:#800080;
	}
	/*
	#tabpanel_test, #tabpanel_test .tabheader {
		border-top:none;
	}
	
	#tabpanel_test .tabpanel_nav {
		background:#CEDFF5;
	}
	*/
	
	a.aolBtn {
      background-color:#7193AE;
      border-color:#4F6B83;
      color:#FFFFFF;
      border-style:solid;
      border-width:1px;
      padding:0.1em 1.5em;
      cursor:pointer;
      text-decoration:none;
  }
    
  a.aolBtn:hover {
      background:#D9B528 url(./image/aol/blue_skin.png) no-repeat scroll 0 -8640px;
      text-decoration:underline;
      color:black;
      border:1px solid #999999;
  }
</style>

</head>
<body>
	


<div id="header_ext">
	<h1>Title Info</h1>
	
	<ul class="navi clearfix">
		<li><a href="#">[FAQ]</a></li>
		<li><a href="#">[PPT]</a></li>
		<li><a href="#">[Contact]</a></li>
	</ul>
	
</div>
<div id='tabpanel_test' class='tabpanel'>
	<div class='tabheader'>
		
		<ul class='tabpanel_nav clearfix'>
			
			
			<li class="tab_active" id="regression">
				<a class='tab_left' href="#">
					<em class='tab_right'>
						<span class='tab_inner'>
							<span class='tab_text'>
								Regression
							</span>
						</span>
					</em>
					</a>
			</li>
			
			<li id="reroll">
				<a class='tab_left' href="#">
					<em class='tab_right'>
						<span class='tab_inner'>
							<span class='tab_text'>
								&nbsp;&nbsp;Reroll&nbsp;&nbsp;
							</span>
						</span>
					</em>
					</a>
			</li>
		
	
		</ul>

	</div>
			
 <div class='panels'>

	<div class="panel">
		
		<div style="height:300px;">
			<br/><br/><br/>
			<a class="aolBtn" href="#" onclick="return false;">aol button example</a>
		</div>
		
	</div>

	<div class="panel hiddenTab">
		
		
		
		<div id='tabpanel_test2' class='tabpanel'>
	<div class='tabheader'>
		
		<ul class='tabpanel_nav clearfix'>
			
			
			<li class="tab_active" id="regression2">
				<a class='tab_left' href="#">
					<em class='tab_right'>
						<span class='tab_inner'>
							<span class='tab_text'>
								Regression2
							</span>
						</span>
					</em>
					</a>
			</li>
			
			<li id="reroll2">
				<a class='tab_left' href="#">
					<em class='tab_right'>
						<span class='tab_inner'>
							<span class='tab_text'>
								Reroll2
							</span>
						</span>
					</em>
					</a>
			</li>
		
	
		</ul>

	</div>
			
 <div class='panels'>

	<div class="panel">
		
		<div style="height:300px;">
			xxxxxxxxxxxxxxxxxxxxx2
		</div>
		
	</div>

	<div class="panel hiddenTab">
		<div style="height:300px;">
			yyyyyyyyyyyyyyyyyyyyyyyy2
		</div>
	</div>

 </div>
</div>

		
	</div>

 </div>
</div>
<div style="margin:20px;">
	选择皮肤：
	
	<select id="skin">
		<option value="css/ebay/tabpanel.css">ebay</option>
		<option value="css/aol/tabpanel.css">aol</option>
		<option value="css/tabpanel.css">extjs</option>
	</select>	
</div>

<script type="text/javascript">

Ext.onReady(function() {
	Ext.get("skin").dom.value="css/aol/tabpanel.css";
	
	function swapStyleSheet(cssId,url){
		var doc=document;
		var existing = doc.getElementById(cssId);
    if(existing){
        existing.parentNode.removeChild(existing);
    }
    
    var ss = doc.createElement("link");
    ss.setAttribute("rel", "stylesheet");
    ss.setAttribute("type", "text/css");
    ss.setAttribute("id", cssId);
    ss.setAttribute("href", url);
    doc.getElementsByTagName("head")[0].appendChild(ss);
	}
	
	var tab=new Ext.ux.TabPanelLite({containerId:'tabpanel_test'});
	
	Ext.get("skin").on("change",function(){
		swapStyleSheet("skinCss",this.getValue());
	});
	
	tab.on("change",function(thisTab,curId){
		alert("show :"+curId);
	});
       
});
</script>


</body>
</html>